<template>
  <div class='hot'>
    <div class='title'>周末游</div>
    <ul class='recommend-list'>
      <li class='item border-bottom' v-for='item in weekendList' :key='item.id'>
          <div class="img-wrapper">
              <img class='img' :src='item.imgUrl'>
          </div>
        <div class='content'>
          <p class='content-title'>{{item.title}}</p>
          <p class='content-desc'>{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeHot',
  props: {
    weekendList: Array
  },
  data () {
    return {
      // weekendList: [{
      //   id: '0001',
      //   imgUrl: 'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
      //   title: '北京温泉排行榜',
      //   desc: '细数北京温泉，温暖你的冬天'
      // }, {
      //   id: '0002',
      //   imgUrl: 'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
      //   title: '北京必游TOP10',
      //   desc: '来北京必去的景点非这些地方莫属'
      // }]
    }
  }
}
</script>
<style lang='stylus' scoped>
    @import '~styles/variables.styl'
    @import '~styles/mixins.styl'
    .title
        line-height :.8rem
        background :#eee
        color: $darkTextColor
        text-indent:.2rem
    .item
        overflow :hidden
        box-sizing:border-box
        .img-wrapper
            height:0
            padding-bottom:37.9%
            .img
                width :100%
          .content
            padding:.1rem
            min-width :0
            .content-title
                line-height:.4rem
                font-size:.32rem
                color:#333
            .content-desc
                color:#ccc
                line-height :.4rem
                ellipsis()
</style>
